<template>
    <span>
        <el-cascader
                :options="provinces"
                v-model="currentValue"
                @active-item-change="handleItemChange"
                :props="props"
                class="proviceselect"
        ></el-cascader>
        <span style="display: inline-block;width: 20px">
        <i :class="icon"></i></span>
    </span>
</template>
<script>
	import Vue from 'vue'
	import ElementUI from 'element-ui'
    import request from 'winged/utils/axios'

	Vue.use(ElementUI);
	export default {
		name: 'wt-city-selector',
		props: {
            value: {
                type: Array,
                default: function() {
                    return ['', ''];
                }
            },
            provinceOptions: {
                type: Array,
                default:function () {
                    return []
                }
            },
            province: {
                type: [String, Number],
                default: ''
            },
            city: {
                type: [String, Number],
                default: ''
            }
		},
		data: function () {
			return {
                currentValue: [this.province, this.city],
                provinces: this.provinceOptions,
                currentProvince: '',
                props: {
                    value: 'id',
                    label: 'name',
                    children: 'cities',
                },
                loading: false
			}
		},
        computed: {
            icon() {
                return this.loading? 'el-icon-loading' : '';
            }
        },
        watch: {
            'province'(val, old) {
                if (val === old) return;
                this.currentValue = [val, this.currentValue[1]];
                this.getCityList(val);
            },
            'city'(val, old) {
                if (val === old) return;
                this.currentValue = [ this.currentValue[0], val];
            },
            'currentValue'(val, old) {
                this.$emit('change', val);
            }
        },
		methods: {
            handleItemChange(val) {
                this.getCityList(val[0]);
            },
            getCityList(val) {
                let province = this.findProvince(val);
                if (!province) {
                    console.error('unable to find province ' + val);
                    return;
                }
                if (province.cities && province.cities.length > 0) {
                    return;
                }
                var vn = this;
                this.loading = true;
                request('doctor/patient/region/sub_region/' + val, 'GET', {}, true, (data) => {
                    this.loading = false;
                    if(typeof(data) == 'string') {
                        data = JSON.parse(data);
                    }
                    province.cities = data;
                }, (error) => {
                    this.loading = false;
                    this.$message.error('加载城市列表失败');
                    console.error(error);
                });
            },
            findProvince(id) {
                for (let i = 0; i < this.provinces.length; i ++) {
                    let item = this.provinces[i];
                    if (id == item.id) {
                        return item;
                    }
                }
                return null;
            },
            getProvinceList() {
                this.loading = true;
                request('doctor/patient/region/province', 'GET', {}, true, (data) => {
                    this.loading = false;
                    if(typeof(data) == 'string') {
                        data = JSON.parse(data);
                    }
                    var arr=[];
                    for (var z = 0; z < data.length; z++ ){
                        arr.push({cities: [],name:data[z].name,id:data[z].id})
                    }
                    this.provinces = arr;
                    if (this.currentValue[0] != '') {
                        this.getCityList(this.currentValue[0]);
                    }
                }, (error) => {
                    this.loading = false;
                    this.$message.error('加载省份列表失败');
                    console.error(error);
                });
            },
		},
        mounted() {
            if (this.provinces.length == 0) {
                this.getProvinceList();
            }
        }
	}
</script>
<style scoped>
    .proviceselect{
        width: 200px;
        padding:0!important;
        border:none!important;
    }
    .el-input-group__prepend{
        padding:0!important;
        border:none!important;
    }
</style>